<template>
  <el-dialog
    ref="drawerRef"
    v-model="dialog"
    title="结账"
    :before-close="handleClose"
    direction="rtl"
    :with-header="true"
    class="demo-drawer"
    width="60%"
    v-loading="loading"
  >
    <div>
      <el-transfer
        class="custom-transfer"
        v-model="value"
        :props="{
          key: 'id',
          label: 'company_name'
        }"
        filterable
        :titles="['可选', '已选']"
        :data="data"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit"> 提 交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { CompanyBillListApi } from "@/api/bill"
import { knotBatchApi } from "@/api/bill"
import { ElDialog, ElMessage } from "element-plus"
import dayjs from "dayjs"

const currentDate = dayjs().format("YYYY-MM-DD")
const dialog = ref(false)
const loading = ref(false)
const data = ref<any[]>([])
const value = ref([])

const formInline = reactive({
  company_name: "",
  create_time_start: currentDate,
  create_time_end: currentDate,
  is_finish: 2
})
const getCompanyTime = () => {
  loading.value = true
  data.value = []
  console.log(formInline)
  CompanyBillListApi(formInline)
    .then((res: any) => {
      if (res.data.length > 0) {
        data.value = res.data
      }
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}

const dialogShow = async () => {
  getCompanyTime()
  dialog.value = true
}
defineExpose({ dialogShow })

const handleClose = () => {
  cancelForm()
  emit("DialogClose", true)
}
const emit = defineEmits(["DialogClose"])
const cancelForm = () => {
  loading.value = false
  dialog.value = false
}

//#region 提交
const submit = () => {
  knotBatchApi({
    ids: value.value.join()
  }).then(() => {
    ElMessage.success("提交成功")
    handleClose()
  })
}
//#endregion
</script>

<style scoped lang="scss">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.custom-transfer {
  /* 调整宽度 */
  width: 100% !important; /* 或者具体的像素值，例如 600px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
